<template>
    <div>
        <div class="footer">
            <ul class="footer-nav">
                <li v-for="(item,index) in nav" :key="index" >
                    <a :href="aIndex==index?'':item.path">
                        <div v-if="fromIndex==1">
                            <img :src="aIndex==index?item.iconActive:item.icon" />
                        </div>
                        <div v-else>
                            <img :src="aIndex==index?'../'+item.iconActive:'../'+item.icon" />
                        </div>
                        <span v-bind:class="{'router-link-active': index==aIndex}">{{item.title}}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import commons from "../../common/js/common.js";
export default {
    name: 'index',
    props:['aIndex','fromIndex'],
    data() {
        return {
            //导航列表
            // 生产
            nav: [
                { title: '首页', name: 'Home', path: commons.paths+'/', icon: 'static/img/homeNav.png', iconActive: 'static/img/homeNavActive.png' },
                { title: '贷款', name: 'RecommentProduct', path: commons.paths+'/loan/index.html', icon: 'static/img/daikuanNav.png', iconActive: 'static/img/daikuanNavActive.png' },
                { title: '发现', name: 'Mine', path: commons.paths+'/news/page.html', icon: 'static/img/faxianNav.png', iconActive: 'static/img/faxianNavActive.png' },
                { title: '我的', name: 'Mine', path: commons.paths+'/mine/mine.html', icon: 'static/img/wodeNav.png', iconActive: 'static/img/wodeNavActive.png' }
            ]
            // 测试
            // nav: [
            //     { title: '首页', name: 'Home', path: '/', icon: 'static/img/homeNav.png', iconActive: 'static/img/homeNavActive.png' },
            //     { title: '贷款', name: 'RecommentProduct', path: '/loan/index.html', icon: 'static/img/daikuanNav.png', iconActive: 'static/img/daikuanNavActive.png' },
            //     { title: '发现', name: 'Mine', path: '/news/page.html', icon: 'static/img/faxianNav.png', iconActive: 'static/img/faxianNavActive.png' },
            //     { title: '我的', name: 'Mine', path: '/mine/mine.html', icon: 'static/img/wodeNav.png', iconActive: 'static/img/wodeNavActive.png' }
            // ]
            // aIndex: 0
        }
    }
}
</script>
<style lang="scss">
.footer {
    width: 100%;
    height: 1.3rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    ul {
        width: 100%;
        height: 100%; // padding-top: 0.05rem;
        padding-left: 0;
        margin-top: 0;
        li {
            float: left;
            list-style: none;
            width: 25%;
            height: 100%;
            a {
                display: inline-block;
                width: 100%;
                color: #666;
                height: 100%;
                font-size: 0.25rem;
                position: relative;
                text-align: center;
            }
            span {
                font-size: 0.32rem;
                position: absolute;
                top: 0.75rem;
                left: 50%;
                transform: translate(-50%, 0)
            }
            img {
                margin-top: 0.05rem;
                width: 0.7rem;
                height: 0.7rem;
            }
        }
    }
    .router-link {
        color: #cbcbcb;
    }
    .router-link-active {
        color: #48d8db;
        border: none !important;
    }
}
</style>


